<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>

<body>
  <div id="canvas-wrp">
    <canvas id="canvas" style=" border:1px solid #ccc ;display: block; margin: 100px auto;"></canvas>
  </div>
</body>
<script>

  let canvas = document.querySelector('#canvas')
  canvas.width = 800
  canvas.height = 600
  let cxt = canvas.getContext('2d')
  cxt.rect(0, 0, 800, 600)
  cxt.fillStyle = '#fff'
  cxt.fill()
  cxt.beginPath()

  cxt.lineWidth = 50
  cxt.strokeStyle = '#1baaaa'

  cxt.beginPath()
  cxt.moveTo(100, 100)
  cxt.lineTo(700, 100)
  cxt.lineCap = 'butt'// 默认值 端点是垂直于线段边缘的平直边缘。
  cxt.stroke()


  cxt.beginPath()
  cxt.moveTo(100, 300)
  cxt.lineTo(700, 300)
  cxt.lineCap = 'round'// /链接处是一个圆链

  cxt.stroke()


  cxt.beginPath()
  cxt.moveTo(100, 500)
  cxt.lineTo(700, 500)
  cxt.lineCap = 'square'//链接处是对角线斜角
  cxt.stroke()

  cxt.lineWidth = 5
  cxt.strokeStyle = '#000'

  cxt.beginPath()
  cxt.moveTo(100, 0)
  cxt.lineTo(100, 600)
  cxt.moveTo(700, 0)
  cxt.lineTo(700, 600)
  cxt.stroke()
</script>

</html>